<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>3.JavaScript-es6 | Electrolux_blog</title>
    <meta name="description" content="hello world">
    <link rel="preload stylesheet" href="/front-base-know-blog/assets/style.4f9339b2.css" as="style">
    <script type="module" src="/front-base-know-blog/assets/app.b7849f6a.js"></script>
    <link rel="preload" href="/front-base-know-blog/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
  <link rel="modulepreload" href="/front-base-know-blog/assets/chunks/framework.408c4d71.js">
  <link rel="modulepreload" href="/front-base-know-blog/assets/chunks/theme.bf7db135.js">
  <link rel="modulepreload" href="/front-base-know-blog/assets/know_know_5javascript-es6.md.4c2cf8f7.lean.js">
  <link rel="icon" type="image/svg+xml" href="https://cdn.jsdelivr.net/npm/electroluxasset@1.0.8/image/svg/book.svg">
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  <script>import("/front-base-know-blog/_pagefind/pagefind.js").then(n=>{window.__pagefind__=n}).catch(()=>{console.log("not load /_pagefind/pagefind.js")});</script>
  </head>
  <body><!--v-if--><!--teleport anchor-->
    <div id="app"><div class="Layout" data-v-f0b011de><!--[--><!--]--><!--[--><span tabindex="-1" data-v-c8616af1></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-c8616af1> Skip to content </a><!--]--><!----><header class="VPNav" data-v-f0b011de data-v-7e5bc4a5><div class="VPNavBar has-sidebar" data-v-7e5bc4a5 data-v-7c10cd25><div class="container" data-v-7c10cd25><div class="title" data-v-7c10cd25><div class="VPNavBarTitle has-sidebar" data-v-7c10cd25 data-v-4d981103><a class="title" href="/front-base-know-blog/" data-v-4d981103><!--[--><!--]--><!--[--><img class="VPImage logo" src="https://cdn.jsdelivr.net/npm/electroluxasset@1.0.8/image/svg/book.svg" alt data-v-6db2186b><!--]--><!--[-->Electrolux_blog<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-7c10cd25><div class="curtain" data-v-7c10cd25></div><div class="content-body" data-v-7c10cd25><!--[--><!--]--><div class="blog-search search" data-pagefind-ignore="all" data-v-7c10cd25 style="--dba016e0:1;" data-v-e09e7552><div class="nav-search-btn-wait" data-v-e09e7552><svg width="14" height="14" viewBox="0 0 20 20" data-v-e09e7552><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" data-v-e09e7552></path></svg><span class="search-tip" data-v-e09e7552>Search</span><span class="metaKey" data-v-e09e7552> K </span></div><!--teleport start--><!--teleport end--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-7c10cd25 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->首页<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/know/know/1html" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->前端基础<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/supper/supper/1%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->前端工程化<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/python/flask" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->Python<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/java/java" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->Java<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/project/javadump%E5%88%86%E6%9E%90" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->项目<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-7c10cd25 data-v-f6a63727><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-f6a63727 data-v-87de0873 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-87de0873><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-87de0873><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-7c10cd25 data-v-0394ad82 data-v-d7a53887><!--[--><a class="VPSocialLink" href="https://gitee.com/Electrolux" aria-label="github" target="_blank" rel="noopener" data-v-d7a53887 data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-7c10cd25 data-v-40855f84 data-v-764effdf><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-764effdf><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-764effdf><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-764effdf><div class="VPMenu" data-v-764effdf data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-87de0873 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-87de0873><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-87de0873><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-d7a53887><!--[--><a class="VPSocialLink" href="https://gitee.com/Electrolux" aria-label="github" target="_blank" rel="noopener" data-v-d7a53887 data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-7c10cd25 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-f0b011de data-v-392e1bf8><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-392e1bf8><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-392e1bf8><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-392e1bf8>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-392e1bf8 data-v-079b16a8><button data-v-079b16a8>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-f0b011de data-v-af16598e><div class="curtain" data-v-af16598e></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-af16598e><span class="visually-hidden" id="sidebar-aria-label" data-v-af16598e> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible has-active" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>前端基础</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/1html" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>html(浏览器)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/2javascript%E5%9F%BA%E7%A1%80" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(1)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/3javascript%E5%9F%BA%E7%A1%80" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(2)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/4javascript%E6%89%8B%E5%86%99%E9%A2%98" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(3) | 手写题</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/4javascript%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA%E9%A2%98" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(3) | 代码输出</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/5javascript-es6" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(4) | es6</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/9javascript%E5%9F%BA%E7%A1%80" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(5)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/6ts" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>TypeScript</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/7css" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>CSS</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/8bug" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>BUG</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>计算机基础</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80/1%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>计算机网络</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>框架 | 工具</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/1vue" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>vue</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/2react" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>react</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/3ssr" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>ssr</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/4%E5%BE%AE%E5%89%8D%E7%AB%AF" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>微前端</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/5vue3" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>vue3</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/6nginx" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>nginx</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/7python" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>python</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/8ffmpeg" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>ffmpeg</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/7tensorFlow" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>tensorFlow</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/8mediapipe" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>mediapipe</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/10aframe" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>aframe</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/11%E9%80%86%E5%90%91%E6%95%B0%E6%8D%AEcrawl" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>逆向数据crawl</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/12threejs" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>threejs</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/13electron" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>13electron</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/17webpack" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>13electron</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>优化 | 工程</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/1%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E5%92%8C%E5%AE%89%E5%85%A8" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>性能优化和安全</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/3%E7%AE%97%E6%B3%95" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>算法</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/4%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>性能优化</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/5npm,%E7%BB%84%E4%BB%B6%E5%BA%93%E6%9E%84%E9%80%A0" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>组件库构造</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/6webrtc" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>webrtc</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/9.wasm" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>wasm</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/11.webcomponent" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>webcomponent</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/12.pwa" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>pwa</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-pagefind-body data-v-f0b011de data-v-a494bd1d><div class="VPDoc has-sidebar has-aside" data-v-a494bd1d data-v-c4b0d3cf><!--[--><!--]--><div class="container" data-v-c4b0d3cf><div class="aside" data-v-c4b0d3cf><div class="aside-curtain" data-v-c4b0d3cf></div><div class="aside-container" data-v-c4b0d3cf><div class="aside-content" data-v-c4b0d3cf><div class="VPDocAside" data-v-c4b0d3cf data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-3f215769 data-v-ff0f39c8><div class="content" data-v-ff0f39c8><div class="outline-marker" data-v-ff0f39c8></div><div class="outline-title" data-v-ff0f39c8>目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0f39c8><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0f39c8> Table of Contents for current page </span><ul class="root" data-v-ff0f39c8 data-v-9a431c33><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-c4b0d3cf><div class="content-container" data-v-c4b0d3cf><!--[--><!--]--><!----><main class="main" data-v-c4b0d3cf><div style="position:relative;" class="vp-doc _front-base-know-blog_know_know_5javascript-es6" data-v-c4b0d3cf><div><h1 id="_3-javascript-es6" tabindex="-1">3.JavaScript-es6 <a class="header-anchor" href="#_3-javascript-es6" aria-label="Permalink to &quot;3.JavaScript-es6&quot;">​</a></h1><nav class="table-of-contents"><ul><li><a href="#_3-0-var-let-const">3.0 var let const</a></li><li><a href="#_3-2-扩展运算符">3.2.扩展运算符</a></li><li><a href="#_3-3-es6对象新增扩展">3.3.ES6对象新增扩展</a></li><li><a href="#_3-4-函数新增扩展">3.4 函数新增扩展</a></li><li><a href="#_3-5-symbol-map-weakmap-for-in-of">3.5 symbol | map | weakmap | for in of</a></li><li><a href="#_3-6-generator函数">3.6.Generator函数</a></li><li><a href="#_3-7-promise">3.7.promise</a><ul><li><a href="#_3-7-1-定义">3.7.1 定义</a></li></ul></li><li><a href="#_3-8-双向绑定">3.8 双向绑定</a><ul><li><a href="#defineproperty">defineProperty</a></li><li><a href="#proxy">proxy</a></li></ul></li><li><a href="#_3-9-reflect">3.9 reflect</a></li><li><a href="#_3-10-类">3.10 类</a></li><li><a href="#_3-11-关于一些包前包后的问题">3.11 关于一些包前包后的问题</a></li><li><a href="#_3-12-数组操作">3.12 数组操作</a><ul><li><a href="#_3-12-1-新建-new">3.12.1 新建 | new</a></li><li><a href="#_3-12-2-取值-slice-splice-at">3.12.2 取值 | slice | splice | at</a></li><li><a href="#_3-12-3-连接-concat">3.12.3 连接 | concat</a></li><li><a href="#_3-12-4-遍历-map-foreach-entries">3.12.4 遍历 | map | forEach | entries</a></li><li><a href="#_3-12-5-检测-every-some-indexof-includes-find-findindex">3.12.5 检测 | every | some | indexOf | includes | find | findIndex</a></li><li><a href="#_3-12-6-筛选-filter">3.12.6 筛选 | filter</a></li><li><a href="#_3-12-7-flat-flatmap">3.12.7 flat | flatmap</a></li><li><a href="#_3-12-8-entires-fromentries">3.12.8 entires | fromEntries</a></li><li><a href="#_3-12-8">3.12.8 ?? | ?.</a></li><li><a href="#_3-12-9-globalthis-全局的this">3.12.9 globalThis | 全局的this</a></li></ul></li><li><a href="#_3-13-字符串操作">3.13 字符串操作</a><ul><li><a href="#_3-13-1-padstart-padend">3.13.1 padstart,padend</a></li></ul></li><li><a href="#_3-15-异步">3.15 异步</a></li><li><a href="#_1-0-js一些简单概念">1.0 js一些简单概念</a></li><li><a href="#_1-1-js遍历">1.1 js遍历</a></li><li><a href="#_1-2-正则表达式">1.2 正则表达式</a></li><li><a href="#_1-3-传参的新方法">1.3 传参的新方法</a></li><li><a href="#_1-4-bom对象">1.4 bom对象</a></li><li><a href="#_1-5-迭代器对象">1.5 迭代器对象</a></li><li><a href="#_1-6-生成器对象">1.6 生成器对象</a></li><li><a href="#_1-11-generator-生成器对象">1.11 Generator（生成器对象）</a></li><li><a href="#_1-12-bigint类型是一种内置对象">1.12 BigInt类型是一种内置对象</a></li><li><a href="#_1-13-map">1.13 Map</a></li><li><a href="#_1-14-set">1.14 Set</a></li><li><a href="#_1-15-weakset">1.15 weakset</a></li><li><a href="#_1-16-weakref">1.16 WeakRef</a></li><li><a href="#_1-20-数据转化">1.20 数据转化</a></li></ul></nav><h2 id="_3-0-var-let-const" tabindex="-1">3.0 var let const <a class="header-anchor" href="#_3-0-var-let-const" aria-label="Permalink to &quot;3.0 var  let const&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> 变量提升。只有声明没有赋值</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FFCB6B;">暂时性死区</span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> const没有声明变量却引入。实例化到被创造的过程。因为只要有let const就会优先实例化。根本原因</span><span style="color:#89DDFF;">:</span><span style="color:#FFCB6B;">变量的生命先于使用</span><span style="color:#A6ACCD;">。（</span><span style="color:#FFCB6B;">块级作用域</span><span style="color:#A6ACCD;">）。</span><span style="color:#FFCB6B;">暂时性死区</span><span style="color:#A6ACCD;">：</span><span style="color:#FFCB6B;">在let</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">const声明前使用</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">can</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">assess</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">xx</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">before</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">init</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">var会变成window的值。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">const只保证变量名指向的地址不变，并不保证该地址的数据不变，所以将一个复合类型的变量声明为常量必须非常小心。</span></span>
<span class="line"><span style="color:#A6ACCD;">例如以下：</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> arr </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> []</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 报错，[1,2,3]与[]不是同一个地址</span></span>
<span class="line"><span style="color:#A6ACCD;">arr </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> arr </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> []</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 不报错，变量名arr指向的地址不变，只是数据改变</span></span>
<span class="line"><span style="color:#A6ACCD;">arr[</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">] </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="_3-2-扩展运算符" tabindex="-1">3.2.扩展运算符 <a class="header-anchor" href="#_3-2-扩展运算符" aria-label="Permalink to &quot;3.2.扩展运算符&quot;">​</a></h2><p>扩展运算符...将数组变成参数序列 Array.from()将类似数组的对象和可遍历的对象（比如ES6新增数据结构Set和Map）转为真正的数组，还可以接受第二个参数用来对每个元素进行处理 Array.of()将一组值转换为数组，注意当只有一个参数时，实际上是指定了数组的长度</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">Array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">from</span><span style="color:#A6ACCD;">([</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">x</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> x</span><span style="color:#89DDFF;">*</span><span style="color:#A6ACCD;">x) </span><span style="color:#676E95;font-style:italic;">// [1,4,9]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">Array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">of</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">11</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">4</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// [2,11,4]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#82AAFF;">Array</span><span style="color:#A6ACCD;">() </span><span style="color:#676E95;font-style:italic;">// []</span></span>
<span class="line"><span style="color:#82AAFF;">Array</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// [, , ,]</span></span>
<span class="line"><span style="color:#82AAFF;">Array</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">11</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">4</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// [2,11,4]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">[</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">15</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">find</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">value</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">index</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">arr</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&gt;</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">9</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// 10</span></span>
<span class="line"><span style="color:#A6ACCD;">[</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">15</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">findIndex</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">value</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">index</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">arr</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&gt;</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">9</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// 2</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">[</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">a</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">b</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">c</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">fill</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">7</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// [7,7,7]</span></span>
<span class="line"><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Array</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">fill</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">7</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// [7,7,7]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;">(</span><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> index </span><span style="color:#89DDFF;">of</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">a</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">b</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">keys</span><span style="color:#A6ACCD;">()) console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(index)</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 0</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 1</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;">(</span><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> value </span><span style="color:#89DDFF;">of</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">a</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">b</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">values</span><span style="color:#A6ACCD;">()) cosole</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(value)</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// a</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// b</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;">(</span><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">index</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> value</span><span style="color:#89DDFF;">]</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">of</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">a</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">b</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">entries</span><span style="color:#A6ACCD;">()) console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(index</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> value)</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 0 a</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 1 b</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">[</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">//true</span></span>
<span class="line"><span style="color:#A6ACCD;">[</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">[</span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">[</span><span style="color:#F78C6C;">4</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">]]]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">flat</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// [1,2,3,4,5]</span></span>
<span class="line"><span style="color:#A6ACCD;">[</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">[</span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">[</span><span style="color:#F78C6C;">4</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">]]]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">flat</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// [1,2,3,[4,5]]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">arr</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">sort</span><span style="color:#A6ACCD;">(cmp) </span><span style="color:#676E95;font-style:italic;">// 排序</span></span></code></pre></div><h2 id="_3-3-es6对象新增扩展" tabindex="-1">3.3.ES6对象新增扩展 <a class="header-anchor" href="#_3-3-es6对象新增扩展" aria-label="Permalink to &quot;3.3.ES6对象新增扩展&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 属性的简写</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">foo</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">foo</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">等同于</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">foo</span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 方法的简写</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#82AAFF;">funct</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">等同于</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">funct</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">rturn</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 字面量定义对象</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> arr </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">arr</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Tom</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">fun</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">+</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ct</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">(){</span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">hello</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">}}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// super关键字</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> proto </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">foo</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">proto-foo</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">foo</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">obj-foo</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">funct</span><span style="color:#89DDFF;">(){</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">super</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">foo</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}}</span></span>
<span class="line"><span style="color:#A6ACCD;">Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setPrototypeOf</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> proto) </span><span style="color:#676E95;font-style:italic;">//为obj设置原型对象</span></span>
<span class="line"><span style="color:#A6ACCD;">obj</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">funct</span><span style="color:#A6ACCD;">() </span><span style="color:#676E95;font-style:italic;">// &#39;proto-foo&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 属性的遍历，注意for in和Object.keys()都得不到symbol属性</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">tom</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> student </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">school</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">dhu</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setPrototypeOf</span><span style="color:#A6ACCD;">(student</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> obj)</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;">(</span><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> x </span><span style="color:#89DDFF;">in</span><span style="color:#A6ACCD;"> student) console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(x) </span><span style="color:#676E95;font-style:italic;">// school, name, age 继承的属性也打印出来</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">keys</span><span style="color:#A6ACCD;">(student)) </span><span style="color:#676E95;font-style:italic;">// school 访问不到继承的属性</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// Object类的新增方法</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> target </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">a</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">b</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> source1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">b</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">c</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> source2 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">c</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">assign</span><span style="color:#A6ACCD;">(target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> source1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> source2}</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(target) </span><span style="color:#676E95;font-style:italic;">// {a:1, b:2, c:3}</span></span></code></pre></div><h2 id="_3-4-函数新增扩展" tabindex="-1">3.4 函数新增扩展 <a class="header-anchor" href="#_3-4-函数新增扩展" aria-label="Permalink to &quot;3.4 函数新增扩展&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 参数设置默认值</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 函数的length属性返回没有指定默认值的参数个数</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 函数的name属性返回原函数的名字或者是anonymous</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 严格模式下，函数参数不能使用默认值、解构赋值、扩展运算符</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 箭头函数</span></span></code></pre></div><h2 id="_3-5-symbol-map-weakmap-for-in-of" tabindex="-1">3.5 symbol | map | weakmap | for in of <a class="header-anchor" href="#_3-5-symbol-map-weakmap-for-in-of" aria-label="Permalink to &quot;3.5 symbol  | map | weakmap  | for in of&quot;">​</a></h2><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">symbol</span></span>
<span class="line"><span style="color:#A6ACCD;">symbol 常用来创建唯一不变的属性名，</span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">Symbol()</span><span style="color:#89DDFF;">`</span><span style="color:#A6ACCD;">用来创建symbol类型的变量，</span><span style="color:#82AAFF;">注意不是</span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">new Symbol()</span><span style="color:#89DDFF;">`</span><span style="color:#A6ACCD;">，传入的参数没啥用只能用来标识提醒程序员。</span><span style="color:#82AAFF;">使用</span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">getOwnPropertySymbols()</span><span style="color:#89DDFF;">`</span><span style="color:#A6ACCD;">可获得Symbol属性。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">工具类中比较常见</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> symbol1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Symbol</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">my symbol</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> symbol2 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Symbol</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">my symbol</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">也可以用来实现私有属性</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getObj</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">symbol</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Symbol</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">test</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">obj</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{};</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">obj</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">symbol</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">test</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">obj</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> temp </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getObj</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getOwnPropertySymbols</span><span style="color:#A6ACCD;">(temp)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">temp[</span><span style="color:#82AAFF;">Symbol</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">test</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)]</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// undefined</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">3.</span><span style="color:#A6ACCD;"> map </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> weakmap</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">Map的键可以是任意类型，WeakMap只能是对象。WeakMap的键是弱引用，键指向的对象可以被垃圾回收的。WeakMap不可遍历。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">WeakMap的使用场景包括解决引用DOM节点可能带来的内存泄露问题</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">Map 常用方法 </span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> map </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Map</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"><span style="color:#A6ACCD;">map</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">a</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">testA</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">map</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">b</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">testB</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(map</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">size)</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">for </span><span style="color:#89DDFF;">in</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">of</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">for </span><span style="color:#89DDFF;">in</span><span style="color:#A6ACCD;"> （可以枚举 enumerable）：string，array，object  （set map 不会报错） </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> 判断 object</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">getOwnPropertyDescriptors</span></span>
<span class="line"><span style="color:#A6ACCD;">for </span><span style="color:#89DDFF;">of</span><span style="color:#A6ACCD;"> （可迭代 iterable）：tring，array，set ，map  （注意这里object会报错）  </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> 判断 arr[Symbol</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">iterator]</span></span>
<span class="line"><span style="color:#A6ACCD;">for </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">of</span><span style="color:#A6ACCD;">  类似于 promise</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">all（这个返回一个数据）</span></span></code></pre></div><h2 id="_3-6-generator函数" tabindex="-1">3.6.Generator函数 <a class="header-anchor" href="#_3-6-generator函数" aria-label="Permalink to &quot;3.6.Generator函数&quot;">​</a></h2><p>一种异步编程解决方案，非常适合将异步任务同步化，async实质上是Generator的语法糖，相当于自动执行Generator函数。</p><div class="language-text"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">// next可以带一个参数，会被当做上一个yield表达式的返回值，否则上一个yield返回值是undefined</span></span>
<span class="line"><span style="color:#A6ACCD;">function* foo(x) {</span></span>
<span class="line"><span style="color:#A6ACCD;">  var y = 2 * (yield (x + 1));</span></span>
<span class="line"><span style="color:#A6ACCD;">  var z = yield (y / 3);</span></span>
<span class="line"><span style="color:#A6ACCD;">  return (x + y + z);</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">var a = foo(5);</span></span>
<span class="line"><span style="color:#A6ACCD;">a.next() // Object{value:6, done:false}</span></span>
<span class="line"><span style="color:#A6ACCD;">a.next() // Object{value:NaN, done:false}</span></span>
<span class="line"><span style="color:#A6ACCD;">a.next() // Object{value:NaN, done:true}</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">var b = foo(5);</span></span>
<span class="line"><span style="color:#A6ACCD;">b.next() // { value:6, done:false }</span></span>
<span class="line"><span style="color:#A6ACCD;">b.next(12) // { value:8, done:false }</span></span>
<span class="line"><span style="color:#A6ACCD;">b.next(13) // { value:42, done:true }</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">const gen = function* () {</span></span>
<span class="line"><span style="color:#A6ACCD;">    const f1 = yield (() =&gt; &#39;f1&#39;)()</span></span>
<span class="line"><span style="color:#A6ACCD;">    const f2 = yield (() =&gt; &#39;f2&#39;)()</span></span>
<span class="line"><span style="color:#A6ACCD;">    console.log(f1.toString())</span></span>
<span class="line"><span style="color:#A6ACCD;">    console.log(f3.toString())</span></span>
<span class="line"><span style="color:#A6ACCD;">};</span></span>
<span class="line"><span style="color:#A6ACCD;">let func = gen()</span></span>
<span class="line"><span style="color:#A6ACCD;">func.next(func.next(func.next().value).value)</span></span></code></pre></div><h2 id="_3-7-promise" tabindex="-1">3.7.promise <a class="header-anchor" href="#_3-7-promise" aria-label="Permalink to &quot;3.7.promise&quot;">​</a></h2><h3 id="_3-7-1-定义" tabindex="-1">3.7.1 定义 <a class="header-anchor" href="#_3-7-1-定义" aria-label="Permalink to &quot;3.7.1 定义&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">promise</span><span style="color:#89DDFF;">:</span></span>
<span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">回调地狱 </span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">同步的，但是then是异步的 </span></span>
<span class="line"><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">三种状态 pending fulfillng reject </span></span>
<span class="line"><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">状态不可逆 。resolve和reject是主线程的，</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">then是异步的</span></span></code></pre></div><h2 id="_3-8-双向绑定" tabindex="-1">3.8 双向绑定 <a class="header-anchor" href="#_3-8-双向绑定" aria-label="Permalink to &quot;3.8 双向绑定&quot;">​</a></h2><h3 id="defineproperty" tabindex="-1">defineProperty <a class="header-anchor" href="#defineproperty" aria-label="Permalink to &quot;defineProperty&quot;">​</a></h3><div class="language-HTML"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">双向绑定</span></span>
<span class="line"><span style="color:#A6ACCD;">Object.defineProperty(obj, prop, desc)</span></span>
<span class="line"><span style="color:#A6ACCD;">obj：需要定义属性的当前对象。</span></span>
<span class="line"><span style="color:#A6ACCD;">prop：当前需要定义的属性名。</span></span>
<span class="line"><span style="color:#A6ACCD;">desc：具体的改变方法</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">en</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">UTF-8</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">X-UA-Compatible</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">IE=edge</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">viewport</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width=device-width, initial-scale=1.0</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Document</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;"> &gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">inputComponent</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">view</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">    &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> inputC </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">#inputComponent</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> bindObiect </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{}</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> data </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">val</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;&quot;</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 值发生改变 会调用data.val绑定bindObiect.message</span></span>
<span class="line"><span style="color:#A6ACCD;">        Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">defineProperty</span><span style="color:#A6ACCD;">(data</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">val</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">//要调用data.val的时候会返回bindObiect</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">//而bindObiect已经在set中进行改变了</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">get</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">       </span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">bindObiect</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">//发生改变会用这个</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">set</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">newVal</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">set：</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">newVal</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">#view</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">innerHTML</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">newVal</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">bindObiect</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">message</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">newVal</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//input onkeyup </span></span>
<span class="line"><span style="color:#A6ACCD;">        document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">inputComponent</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">addEventListener</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">input</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 把input标签里的值赋值给vm.msg 让他调用Objet.defineProperty方法</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">data</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">val</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 把试图赋值给vue的变量</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">//对比于document.querySelector(&quot;#view&quot;).innerHTML的好处是可以清晰的绑定好几个对象</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 有get 有 set</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 这个值可能会在多个地方被调用</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">data</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">val</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">object 监听实例 自己监听自己  这里有一个大问题就是输出person的时候只会输出 person的name和sex，别的并不会输出</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> number </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> person </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">张三</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">sex</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">男</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">defineProperty</span><span style="color:#A6ACCD;">(person</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">age</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,{</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span></span>
<span class="line"><span style="color:#89DDFF;">	</span><span style="color:#676E95;font-style:italic;">//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">get</span><span style="color:#89DDFF;">(){</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">有人读取age属性了</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">number</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">	</span><span style="color:#676E95;font-style:italic;">//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">set</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">value</span><span style="color:#89DDFF;">){</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">有人修改了age属性，且值是</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">value</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">number</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre></div><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">object 监听实例 数据代理</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//监听的数组会消失</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">val</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">val2</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> target </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">defineProperty</span><span style="color:#A6ACCD;">(target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">val</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//如已设置 set 或 get, 就不能设置 writable 和 value 中的任何一个</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// writable: true,  </span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#82AAFF;">get</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">get里面的值：</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">obj</span><span style="color:#F07178;">[</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">val</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">])</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">obj</span><span style="color:#F07178;">[</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">val</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">]</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//发生改变会用这个</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#82AAFF;">set</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">newVal</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">set里面的值：</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">newVal</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">obj</span><span style="color:#F07178;">[</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">val</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">newVal</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//对target操作就是对obj进行操作</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(target</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">val)</span></span></code></pre></div><h3 id="proxy" tabindex="-1">proxy <a class="header-anchor" href="#proxy" aria-label="Permalink to &quot;proxy&quot;">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">var proxy = new Proxy(target, handler);</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">第一个target是要拦截的目标对象，handler处理程序对象是对拦截后要完成的操作</span></span></code></pre></div><p><code>get</code> 方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。</p><p>取值get -console.log() 会进行拦截</p><p>赋值<code>set</code> 方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为**目标对象、属性名、属性值和 <code>Proxy</code> 实例本身，其中最后一个参数可选。 ** -xxxxxxxxx=xxxxxxxxxxx 会进行拦截</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">//代码表示，如果访问目标对象不存在的属性，会抛出一个错误。如果没有这个拦截函数，访问不存在的属性，只会返回 undefined。</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> person </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">webchang</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> proxy </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Proxy</span><span style="color:#A6ACCD;">(person</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">get</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">in</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">target</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">target</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;">]</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Error</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">属性不存在</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">set</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">value</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;font-style:italic;">throw</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Error</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">数据不合法</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">                </span><span style="color:#676E95;font-style:italic;">// 对于满足条件的 age 属性以及其他属性，直接保存</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">target</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(proxy</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(proxy</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">age)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 报错属性不存在</span></span>
<span class="line"><span style="color:#A6ACCD;">        proxy</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">  </span><span style="color:#676E95;font-style:italic;">//报错 数据不合法</span></span></code></pre></div><p>双向绑定</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">en</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">UTF-8</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">X-UA-Compatible</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">IE=edge</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">viewport</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width=device-width, initial-scale=1.0</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Document</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">inputComponent</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">view</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">    &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//代码表示，如果访问目标对象不存在的属性，会抛出一个错误。如果没有这个拦截函数，访问不存在的属性，只会返回 undefined。</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> bindObject </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> proxy </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Proxy</span><span style="color:#A6ACCD;">(bindObject</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">//第一个参数是默认是 bindObject 第二个参数是key</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">get</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;font-style:italic;">property</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">property</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">bindObject</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">val</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">//赋值</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#82AAFF;">set</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">value</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#inputComponent</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">innerHTML</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">bindObject</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">val</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">value</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">                </span><span style="color:#676E95;font-style:italic;">// Reflect.set(bindObject, property, value);</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">inputComponent</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">addEventListener</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">input</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 把input标签里的值赋值给vm.msg 让他调用Objet.defineProperty方法</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">proxy</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">val</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 把试图赋值给vue的变量</span></span>
<span class="line"><span style="color:#F07178;">            </span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">//这里触发get方法</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">proxy</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">val</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;"> 1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><p>面试中可能问到的知识点</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1.Object.defineProperty只能监听到对象属性的读取或者是写入，而Proxy除读写外还可以监听对象中属性的删除，对对象当中方法的调用等等。----具体的就是在new Proxy的第二个参数中传入deleteProperty，setProperty等13个属性</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">3.以往我们想要通过Object.defineProperty去监视数组的操作最常见的方式是重写数组的操作方法，这也是Vue.js中所使用的方式，大体的方式就是通过自定义的方法去覆盖掉数组原型对象上的push，shift之类的方法，以此来劫持对应的方法调用的过程。Object.defineProperty不能监听数组长度变化，proxy是一个类似于array的对象。所以，如果数组长度改变，key值就是length，调用push等方法，key就是push。也就是说，这玩意从一个监听（两个对象）改成了一个赋值（一个对象一个值）</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">3.Proxy是以非入侵的方式监管了对象的读写，那也就是说一个已经定义好的对象我们不需要对对象本身去做任何的操作，就可以监视到他内部成员的读写，而defineProperty的方式就要求我们必须按特定的方式单独去定义对象当中那些被监视的属性。</span></span></code></pre></div><h2 id="_3-9-reflect" tabindex="-1">3.9 reflect <a class="header-anchor" href="#_3-9-reflect" aria-label="Permalink to &quot;3.9 reflect&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">test</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#A6ACCD;">Reflect</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">has</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">in</span><span style="color:#A6ACCD;"> obj</span></span>
<span class="line"><span style="color:#A6ACCD;">Reflect</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">deleteProperty</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)    </span><span style="color:#89DDFF;">delete</span><span style="color:#A6ACCD;"> obj[</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#A6ACCD;">Reflect</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">ownKeys</span><span style="color:#A6ACCD;">(obj)    object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">key</span><span style="color:#A6ACCD;">(obj)</span></span>
<span class="line"><span style="color:#A6ACCD;">Reflect</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#A6ACCD;">(obj</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">test</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)  </span><span style="color:#676E95;font-style:italic;">//获取对象的值</span></span></code></pre></div><h2 id="_3-10-类" tabindex="-1">3.10 类 <a class="header-anchor" href="#_3-10-类" aria-label="Permalink to &quot;3.10 类&quot;">​</a></h2><p>class静态属性只能通过构造函数去拿到。继承通过super和extend来进行实现</p><h2 id="_3-11-关于一些包前包后的问题" tabindex="-1">3.11 关于一些包前包后的问题 <a class="header-anchor" href="#_3-11-关于一些包前包后的问题" aria-label="Permalink to &quot;3.11 关于一些包前包后的问题&quot;">​</a></h2><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1.伪类是包前包后的。例如nth-child(n-2) 这就是说包括第二个之后的都是这个属性</span></span>
<span class="line"><span style="color:#A6ACCD;">2.silce是包前不包后的 如let a=[0,1,2,3,4];a.slice(1,2). 返回[1]</span></span>
<span class="line"><span style="color:#A6ACCD;">3.splice 包前页也包后</span></span></code></pre></div><h2 id="_3-12-数组操作" tabindex="-1">3.12 数组操作 <a class="header-anchor" href="#_3-12-数组操作" aria-label="Permalink to &quot;3.12 数组操作&quot;">​</a></h2><div class="language-perl"><button title="Copy Code" class="copy"></button><span class="lang">perl</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">--1.数组增删改查+</span><span style="color:#82AAFF;">reverse</span><span style="color:#A6ACCD;">、 </span><span style="color:#82AAFF;">sort</span><span style="color:#A6ACCD;">、 splice方法会对原来的数组进行修改。下面默认不会对原数组进行修改，如果修改会有标出</span></span>
<span class="line"><span style="color:#A6ACCD;">--2.</span><span style="color:#82AAFF;">push</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">pop</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">unshift</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">shift</span></span></code></pre></div><h3 id="_3-12-1-新建-new" tabindex="-1">3.12.1 新建 | new <a class="header-anchor" href="#_3-12-1-新建-new" aria-label="Permalink to &quot;3.12.1  新建 | new&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Array</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">fill</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//生成5个为3的</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//fill(3)  fill传参可以 fill(value, start, end)。返回修改后的数据。数组本身会改变</span></span>
<span class="line"><span style="color:#A6ACCD;">Array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">from</span><span style="color:#A6ACCD;">([</span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;">])</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="_3-12-2-取值-slice-splice-at" tabindex="-1">3.12.2 取值 | slice | splice | at <a class="header-anchor" href="#_3-12-2-取值-slice-splice-at" aria-label="Permalink to &quot;3.12.2 取值 | slice |  splice |  at&quot;">​</a></h3><h4 id="_3-12-2-1-传参" tabindex="-1">3.12.2.1 传参 <a class="header-anchor" href="#_3-12-2-1-传参" aria-label="Permalink to &quot;3.12.2.1 传参&quot;">​</a></h4><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">slice接收两个参数：start和end。返回值是被分割的object（浅复制）</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">splice</span><span style="color:#A6ACCD;">(starPosition</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">deleteCount</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">addItem1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">addItem2)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">中间的是要剪掉的。返回被剪掉的值。赋值剩下的给左边</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">at 就传入一个参数指明位置</span></span></code></pre></div><h4 id="_3-12-2-2-易错" tabindex="-1">3.12.2.2 易错 <a class="header-anchor" href="#_3-12-2-2-易错" aria-label="Permalink to &quot;3.12.2.2 易错&quot;">​</a></h4><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;"></span></span></code></pre></div><h4 id="_3-12-2-3-实操" tabindex="-1">3.12.2.3 实操 <a class="header-anchor" href="#_3-12-2-3-实操" aria-label="Permalink to &quot;3.12.2.3 实操&quot;">​</a></h4><p>slice方法从一个数组截取一段，</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">slice不改变原数组 ，slice接受2个参数。(start</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">end)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">返回由start和end决定的一个浅拷贝</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">包括前面</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">8</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#A6ACCD;">a</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">slice</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">)  </span><span style="color:#676E95;font-style:italic;">//a</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">splice改变原数组，</span><span style="color:#82AAFF;">可传入3个参数</span><span style="color:#A6ACCD;">(start</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">deleteCount</span><span style="color:#89DDFF;">,...</span><span style="color:#A6ACCD;">args):start</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">修改的开始位置（包括了），deleteCount</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">移除元素的个数，args</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">添加进数组的元素 多选。返回的是被删除的数组元素</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">8</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> arr</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">4</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#A6ACCD;">arr</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">splice</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">dsada</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">//arr变成 [&#39;dsada&#39;, 3, 4]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">3.</span><span style="color:#A6ACCD;"> at返回数组的索引，允许使用at语法</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> array1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">8</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">130</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">44</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(array1</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">at</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//130</span></span></code></pre></div><h3 id="_3-12-3-连接-concat" tabindex="-1">3.12.3 连接 | concat <a class="header-anchor" href="#_3-12-3-连接-concat" aria-label="Permalink to &quot;3.12.3 连接 | concat&quot;">​</a></h3><p>concat用于连接多个数组返回一个新数组</p><h4 id="_3-12-3-1-传参" tabindex="-1">3.12.3.1 传参 <a class="header-anchor" href="#_3-12-3-1-传参" aria-label="Permalink to &quot;3.12.3.1 传参&quot;">​</a></h4><p>传对象或者是数组都没有问题,返回一个拼接好的数组，要接收</p><h4 id="_3-12-3-2-易错" tabindex="-1">3.12.3.2 易错 <a class="header-anchor" href="#_3-12-3-2-易错" aria-label="Permalink to &quot;3.12.3.2 易错&quot;">​</a></h4><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">容易错的地方就是可能会忽略他的返回值是一个数组</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">对于复杂数据类型来说，他是一个浅拷贝</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">concat 默认情况下不会将类数组对象视作数组——仅在 Symbol</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">isConcatSpreadable 被设置为真值（例如，</span><span style="color:#FF9CAC;">true</span><span style="color:#A6ACCD;">）</span><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">原理是访问length属性然后访问每一个索引添加</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">[]</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> b </span><span style="color:#89DDFF;">={</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">:</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;">length</span><span style="color:#89DDFF;">:</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">Symbol</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">isConcatSpreadable</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> c </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> a</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#A6ACCD;">(b) </span><span style="color:#676E95;font-style:italic;">//c输出  [2]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">b </span><span style="color:#89DDFF;">={</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">:</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;">length</span><span style="color:#89DDFF;">:</span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">Symbol</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">isConcatSpreadable</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">c </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> a</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#A6ACCD;">(b) </span><span style="color:#676E95;font-style:italic;">//c输出  [2, empty × 2]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">b </span><span style="color:#89DDFF;">={</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">:</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;">length</span><span style="color:#89DDFF;">:</span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">c </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> a</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#A6ACCD;">(b) </span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//c输出  </span></span>
<span class="line"><span style="color:#A6ACCD;">[</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">0</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">length</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span></span></code></pre></div><h4 id="_3-12-3-3-实操" tabindex="-1">3.12.3.3 实操 <a class="header-anchor" href="#_3-12-3-3-实操" aria-label="Permalink to &quot;3.12.3.3 实操&quot;">​</a></h4><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> param </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">[</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">param[</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">data</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">=</span><span style="color:#F78C6C;">45</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> array </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#A6ACCD;">([</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">a</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">param )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(param</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">array)</span></span></code></pre></div><h3 id="_3-12-4-遍历-map-foreach-entries" tabindex="-1">3.12.4 遍历 | map | forEach | entries <a class="header-anchor" href="#_3-12-4-遍历-map-foreach-entries" aria-label="Permalink to &quot;3.12.4 遍历  |  map |  forEach   |  entries&quot;">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">map |  forEach   |  entries 第二个参数能够传入this</span></span></code></pre></div><h4 id="_3-12-4-1-传参" tabindex="-1">3.12.4.1 传参 <a class="header-anchor" href="#_3-12-4-1-传参" aria-label="Permalink to &quot;3.12.4.1 传参&quot;">​</a></h4><h4 id="_3-12-4-2-易错" tabindex="-1">3.12.4.2 易错 <a class="header-anchor" href="#_3-12-4-2-易错" aria-label="Permalink to &quot;3.12.4.2 易错&quot;">​</a></h4><h4 id="_3-12-4-3-实操" tabindex="-1">3.12.4.3 实操 <a class="header-anchor" href="#_3-12-4-3-实操" aria-label="Permalink to &quot;3.12.4.3 实操&quot;">​</a></h4><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;"> for</span><span style="color:#89DDFF;">..</span><span style="color:#A6ACCD;">in 遍历 对象 或 数组 时，实际上遍历的是对象中可枚举的 属性名 或 数组的下标 ，仍然需要手动获取 值。用于枚举对象中的可枚举属性名</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;"> 使用 for</span><span style="color:#89DDFF;">..</span><span style="color:#A6ACCD;">of 遍历 数组 时，实际上就是在遍历数组的 值，而非 下标，for of用于object直接会报错，for of用于迭代器</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">map</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">filter</span><span style="color:#89DDFF;">/</span><span style="color:#FFCB6B;">reduce</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> 对所有元素执行入参函数，创建新数组</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">4.</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> array1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">a</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">b</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">c</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//通过调用iterator1.next(),返回{value:xx,done:xx}.</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//调用起来可以用解构赋值</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> iterator1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> array1</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">entries</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="_3-12-5-检测-every-some-indexof-includes-find-findindex" tabindex="-1">3.12.5 检测 | every | some | indexOf | includes | find | findIndex <a class="header-anchor" href="#_3-12-5-检测-every-some-indexof-includes-find-findindex" aria-label="Permalink to &quot;3.12.5 检测 | every |  some |  indexOf  |  includes |  find  |  findIndex&quot;">​</a></h3><h4 id="_3-12-5-1-传参" tabindex="-1">3.12.5.1 传参 <a class="header-anchor" href="#_3-12-5-1-传参" aria-label="Permalink to &quot;3.12.5.1 传参&quot;">​</a></h4><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#F78C6C;">1.</span><span style="color:#A6ACCD;"> every </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">some</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">可以接收三个参数：当前值，索引值，当前数组</span></span>
<span class="line"><span style="color:#F78C6C;">2.</span><span style="color:#A6ACCD;"> indexOf </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> includes  字符串，数组都可以。传参。第一个参数传入查找的字符串，第二个参数传入开始查找的位置（开始查找的位置）。xx是大的元素</span></span>
<span class="line"><span style="color:#F78C6C;">3.</span><span style="color:#A6ACCD;">  find </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> findIndex 传3个参数 element</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> index</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> array</span></span></code></pre></div><h4 id="_3-12-5-2-易错" tabindex="-1">3.12.5.2 易错 <a class="header-anchor" href="#_3-12-5-2-易错" aria-label="Permalink to &quot;3.12.5.2 易错&quot;">​</a></h4><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">every </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">some返回一个boolean</span><span style="color:#A6ACCD;">(这里没有什么坑)</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">include 是 es6的语法，可以判断数组是否里面有没有NaN</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">indexof不行</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">字符串面对不能第二个参数不能传入负数，而数组可以。而且不是字符串的情况下默认会转换为字符串，数组也不会进行转化</span></span>
<span class="line"><span style="color:#A6ACCD;">[</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">a</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">b</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">c</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">d</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">b</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">)      </span><span style="color:#676E95;font-style:italic;">// false   include  第二个参数传入开始索引</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">includes 找不到返回false，indexOf返回</span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">1</span></span></code></pre></div><h4 id="_3-12-5-3-实操" tabindex="-1">3.12.5.3 实操 <a class="header-anchor" href="#_3-12-5-3-实操" aria-label="Permalink to &quot;3.12.5.3 实操&quot;">​</a></h4><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">every</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">4</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">6</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">8</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> status </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> a</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">every</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">value</span><span style="color:#89DDFF;">)</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&gt;</span><span style="color:#F78C6C;">5</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">some</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">4</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">6</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">8</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> status </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> a</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">some</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">value</span><span style="color:#89DDFF;">)</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&gt;</span><span style="color:#F78C6C;">5</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">include </span></span>
<span class="line"><span style="color:#A6ACCD;">[</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">4</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">4</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">[</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">4</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">indexOf</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// 找不到的返回-1</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">找到所有的元素位置 利用while和indexof的第二个参数</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> indices </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> []</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> array </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">a</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">b</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">a</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">c</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">a</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">d</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> element </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">a</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> idx </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">indexOf</span><span style="color:#A6ACCD;">(element)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">while</span><span style="color:#A6ACCD;"> (idx </span><span style="color:#89DDFF;">!==</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">indices</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">idx</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">idx</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">indexOf</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">element</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">idx</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="_3-12-6-筛选-filter" tabindex="-1">3.12.6 筛选 | filter <a class="header-anchor" href="#_3-12-6-筛选-filter" aria-label="Permalink to &quot;3.12.6 筛选 | filter&quot;">​</a></h3><h4 id="_3-12-6-1-传参" tabindex="-1">3.12.6.1 传参 <a class="header-anchor" href="#_3-12-6-1-传参" aria-label="Permalink to &quot;3.12.6.1 传参&quot;">​</a></h4><p>可以接收三个参数：当前值，索引值，当前数组</p><h4 id="_3-12-6-2-易错" tabindex="-1">3.12.6.2 易错 <a class="header-anchor" href="#_3-12-6-2-易错" aria-label="Permalink to &quot;3.12.6.2 易错&quot;">​</a></h4><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">返回值创造数组的一部分浅拷贝</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">不会改变原数组。</span></span></code></pre></div><h4 id="_3-12-6-3-实操" tabindex="-1">3.12.6.3 实操 <a class="header-anchor" href="#_3-12-6-3-实操" aria-label="Permalink to &quot;3.12.6.3 实操&quot;">​</a></h4><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">every</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> words </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">less</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">bigthan6</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> result </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> words</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">filter</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">word</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> word</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length </span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">6</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(result)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">[]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">filter</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">word</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> word</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length </span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">6</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="_3-12-7-flat-flatmap" tabindex="-1">3.12.7 flat | flatmap <a class="header-anchor" href="#_3-12-7-flat-flatmap" aria-label="Permalink to &quot;3.12.7 flat  | flatmap&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">//flat(),可以传入一个参数，指定要提取的结构深度,返回组转后的数组</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> arr1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">4</span><span style="color:#A6ACCD;">]]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(arr1</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">flat</span><span style="color:#A6ACCD;">())</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">flatmap </span><span style="color:#676E95;font-style:italic;">//相当于深度一层的map</span></span></code></pre></div><h3 id="_3-12-8-entires-fromentries" tabindex="-1">3.12.8 entires | fromEntries <a class="header-anchor" href="#_3-12-8-entires-fromentries" aria-label="Permalink to &quot;3.12.8 entires | fromEntries&quot;">​</a></h3><p>将一个对象中可枚举属性的键名和键值按照二维数组的方式返回</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">entries</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">one</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">two</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)    </span><span style="color:#676E95;font-style:italic;">//[[&#39;one&#39;, 1], [&#39;two&#39;, 2]]</span></span>
<span class="line"><span style="color:#A6ACCD;">Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">fromEntries</span><span style="color:#A6ACCD;">([[</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">one</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">two</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">]]) </span><span style="color:#676E95;font-style:italic;">//{ one: 1, two: 2 }</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">map转成object非常好用</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> map </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Map</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"><span style="color:#A6ACCD;">map</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">jimmy</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">map</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">age</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">fromEntries</span><span style="color:#A6ACCD;">(map)</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(obj)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">还有过滤</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> course </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">math</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">80</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">english</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">85</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">chinese</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">90</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> res </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">entries</span><span style="color:#A6ACCD;">(course)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">filter</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">([</span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">val</span><span style="color:#89DDFF;">])</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> val </span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">80</span><span style="color:#A6ACCD;">)</span></span></code></pre></div><p>axios</p><h3 id="_3-12-8" tabindex="-1">3.12.8 ?? | ?. <a class="header-anchor" href="#_3-12-8" aria-label="Permalink to &quot;3.12.8 ??  |  ?.&quot;">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">空值合并符 ： ??</span></span>
<span class="line"><span style="color:#A6ACCD;">可选链： ?.</span></span></code></pre></div><h3 id="_3-12-9-globalthis-全局的this" tabindex="-1">3.12.9 globalThis | 全局的this <a class="header-anchor" href="#_3-12-9-globalthis-全局的this" aria-label="Permalink to &quot;3.12.9 globalThis | 全局的this&quot;">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">globalThis</span></span></code></pre></div><h2 id="_3-13-字符串操作" tabindex="-1">3.13 字符串操作 <a class="header-anchor" href="#_3-13-字符串操作" aria-label="Permalink to &quot;3.13 字符串操作&quot;">​</a></h2><h3 id="_3-13-1-padstart-padend" tabindex="-1">3.13.1 padstart,padend <a class="header-anchor" href="#_3-13-1-padstart-padend" aria-label="Permalink to &quot;3.13.1 padstart,padend&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">9</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">padStart</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">)   </span><span style="color:#676E95;font-style:italic;">//输出09   用0去填补前面</span></span></code></pre></div><h2 id="_3-15-异步" tabindex="-1">3.15 异步 <a class="header-anchor" href="#_3-15-异步" aria-label="Permalink to &quot;3.15 异步&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">import</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./dialogBox.js</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> 	</span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">res</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre></div><h1 id="_1-js数据结构-红宝书" tabindex="-1">1.js数据结构 | 红宝书 <a class="header-anchor" href="#_1-js数据结构-红宝书" aria-label="Permalink to &quot;1.js数据结构 | 红宝书&quot;">​</a></h1><h2 id="_1-0-js一些简单概念" tabindex="-1">1.0 js一些简单概念 <a class="header-anchor" href="#_1-0-js一些简单概念" aria-label="Permalink to &quot;1.0 js一些简单概念&quot;">​</a></h2><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1.  0.1+0.2！= 0.3原因IEEE 754的双精度标准（二进制）</span></span>
<span class="line"><span style="color:#A6ACCD;">解决方法：es6中，abs相减小于这个值那么就可以认为是相等的</span></span>
<span class="line"><span style="color:#A6ACCD;">Math.abs(a-b)&lt;Number.EPSILON;</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">2.  nan是number的特殊类型。不等于任何值，即使nan==nan返回值也是一个false，判断是否nan要调用isnan（）原理是会尝试转化number类型，能转化的返回true，否则返回false</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">3.  6个简单数据类型:undefined number string boolean symbol  null。</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">number 0 nan是false值</span></span>
<span class="line"><span style="color:#A6ACCD;">string是0是false值。</span></span>
<span class="line"><span style="color:#A6ACCD;">object是null那么就是空值</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">4.   object是一个复杂对象，null用typeof的返回值会是一个object。function用typeof会返回一个function的string（自己试验过）</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">5.  defer延迟加载 async 异步加载 一般先搞html再加载js</span></span>
<span class="line"><span style="color:#A6ACCD;">6.  var 变量提升。只有声明没有赋值</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">8.  暂时性死区:let const没有声明变量却引入。实例化到被创造的过程。因为只要有let const就会优先实例化。根本原因:变量的生命先于使用。（块级作用域）。在我们import引入css也会报这个错</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">var会变成window的值。</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">typeof和instanceof的区别是：typeof的返回用来说明变量的数据类型（但是array，null等复杂对象一律返回object）；instanceof的返回值是布尔值，用于判断一个变量是否属于某个对象的实例。</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">const只保证变量名指向的地址不变，并不保证该地址的数据不变，所以将一个复合类型的变量声明为常量必须非常小心。</span></span>
<span class="line"><span style="color:#A6ACCD;">例如以下：</span></span>
<span class="line"><span style="color:#A6ACCD;">const arr = [];</span></span>
<span class="line"><span style="color:#A6ACCD;">// 报错，[1,2,3]与[]不是同一个地址</span></span>
<span class="line"><span style="color:#A6ACCD;">arr = [1,2,3];</span></span>
<span class="line"><span style="color:#A6ACCD;">const arr = [];</span></span>
<span class="line"><span style="color:#A6ACCD;">// 不报错，变量名arr指向的地址不变，只是数据改变</span></span>
<span class="line"><span style="color:#A6ACCD;">arr[0] = 1;</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">&lt;link rel=&quot;stylesheet&quot;type=&quot;text/css&quot;href=&quot;1.css&quot;/&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">script src</span></span>
<span class="line"><span style="color:#A6ACCD;">noscript标签：不能显示javascript显示的</span></span>
<span class="line"><span style="color:#A6ACCD;">严格模式：有一些ecma script3的语法使用不了</span></span>
<span class="line"><span style="color:#A6ACCD;">分号:某些情况能够提高性能，一些浏览器会自动补全。而且方便删除空行来压缩代码</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">正向代理代理的对象是客户端 ，反向代理代理的对象是服务端 分发请求</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">假如每一个 item 的图片的宽高相等，但图片下方的标题可能一行，可能多行，如何做瀑布流？</span></span>
<span class="line"><span style="color:#A6ACCD;">解决：div不设置高度，由内容撑开</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">这里history的这种模式需要后台配置支持。比如：（解决跨域）、history模式、多入口 naigx</span></span>
<span class="line"><span style="color:#A6ACCD;">1.hash通过监听浏览器的onhashchange()事件变化（监听location的hash值），查找对应的路由规则。不会有历史记录</span></span>
<span class="line"><span style="color:#A6ACCD;">2.history原理： 利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化。</span></span>
<span class="line"><span style="color:#A6ACCD;">当我们进行项目的主页的时候，一切正常，可以访问，但是当我们刷新页面或者直接访问路径的时候就会返回404，那是因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">array会重写自己的object方法。</span></span>
<span class="line"><span style="color:#A6ACCD;">讲的很详细，但是没有讲Object.prototype.toString的内部实现，应该说一下会对非null 或 undefined的数据类型进行装箱操作，然后去找出对象的 【Symbol.toStringTag】 属性值，还有可能要遍历原型链，取到的值作为 tag, 然后返回 &quot;【object &quot; + tag + &quot;】&quot; 形式的字符串</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">a++还是++a:前者先引用接下来操作值。后者相反</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">watch和computed源码都是基于Reactive Effect这个类，通过getter与setter更新数据视图。</span></span>
<span class="line"><span style="color:#A6ACCD;">watch只能监听一个。因为第一个传参丢给getter，track只收集了这个参数。</span></span>
<span class="line"><span style="color:#A6ACCD;">而computed传给getter，会把里面所有参数全部track收集，这里面scheduler调度器也是核心</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">es6新增字符串语法 </span></span>
<span class="line"><span style="color:#A6ACCD;">1.模板自变量，反向单引号</span></span>
<span class="line"><span style="color:#A6ACCD;">2.模板自变量差值。反响单引号＋括号${}</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">... :剩余操作符统一拿取</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">对象object的语法：</span></span>
<span class="line"><span style="color:#A6ACCD;">1.通过new创造出来</span></span>
<span class="line"><span style="color:#A6ACCD;">2.默认有一个constructor</span></span>
<span class="line"><span style="color:#A6ACCD;">3.hasownproperty，判断是否有这个属性</span></span>
<span class="line"><span style="color:#A6ACCD;">4.tostring</span></span>
<span class="line"><span style="color:#A6ACCD;">5.symbol（符号描述）:入参是描述值.读取这个参数要用tostring方法或者es2019的description方法，这个值不是基本类型也不是引用类型。这玩意可以用来做key，因为object不会冲突</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">判断类型时array和null不能用typeof来判断，null用===来判断，array可以用es6的isarray来判断</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">-infinty和infinty的typeof也是number</span></span></code></pre></div><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1.  v8 的sort 是插入和快排（length小于10是插入，大于10是快排）。 现在一般是冒泡</span></span>
<span class="line"><span style="color:#A6ACCD;">2.v8 是 Ecmascript+ WebAssembly   WebAssembly的最基本用例就是被开发者用来编写浏览器内的软件。</span></span></code></pre></div><h2 id="_1-1-js遍历" tabindex="-1">1.1 js遍历 <a class="header-anchor" href="#_1-1-js遍历" aria-label="Permalink to &quot;1.1 js遍历&quot;">​</a></h2><p>ECMA（语法）+dom（文档对象模型 p titile h1）和bom（浏览器对象模型 控制浏览器前进后退屏幕大小-其实bom包括了dom）</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 小知识点 如果function 没有return，那么如果console.log默认就是undefine</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//1.1使用let in来进行声明可以避免污染外部变量</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//由于属性 key 是字符串，迭代出的元素索引是 string,不是 number，不能直接进行运算，如下</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//类似于Object.keys()，遍历对象的key</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> arr </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> (</span><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> index </span><span style="color:#89DDFF;">in</span><span style="color:#A6ACCD;"> arr) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">res</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">index</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// console.log(res) //输出11 21 31</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//1.2使用let of来遍历数/数组对象/字符串/map/set等拥有迭代器对象（iterator）的集合</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> arr </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> (</span><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> index </span><span style="color:#89DDFF;">of</span><span style="color:#A6ACCD;"> arr) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">res</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">index</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// console.log(res) //输出2 3 4</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">		</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//1.3遍历object 示例</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> myObject</span><span style="color:#89DDFF;">={</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">zengpei</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#F78C6C;">12</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> (</span><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> key </span><span style="color:#89DDFF;">of</span><span style="color:#A6ACCD;"> Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">keys</span><span style="color:#A6ACCD;">(myObject)) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">myObject</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;">])</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">         </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span></span>
<span class="line"><span style="color:#89DDFF;">		</span><span style="color:#676E95;font-style:italic;">//1.4 遍历奇怪的东西</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> valueSymbols </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">{</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">med</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#F78C6C;">1000</span><span style="color:#89DDFF;">},{</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">test</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#F78C6C;">900</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> ((i) </span><span style="color:#89DDFF;">in</span><span style="color:#A6ACCD;"> (valueSymbols))</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">          </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;">)  </span><span style="color:#676E95;font-style:italic;">//输出0,1</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> ((i) </span><span style="color:#89DDFF;">of</span><span style="color:#A6ACCD;"> (valueSymbols))</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">          </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;">) </span><span style="color:#676E95;font-style:italic;">// 输出 {med: 1000} {test: 900}</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> ((i) </span><span style="color:#89DDFF;">of</span><span style="color:#A6ACCD;"> (valueSymbols))</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">          </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">keys</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;">)]) </span><span style="color:#676E95;font-style:italic;">// 输出 1000  900</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="_1-2-正则表达式" tabindex="-1">1.2 正则表达式 <a class="header-anchor" href="#_1-2-正则表达式" aria-label="Permalink to &quot;1.2 正则表达式&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 正则表达式</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getQueryObject</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">//假如不传值，默认也会有值</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">==</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">null</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">?</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">location</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">href</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">//这一套组合技就是取到最后？后面的值</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// url.lastIndexOf(&#39;?&#39;)找到位置</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">search</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">substring</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">url</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">lastIndexOf</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">?</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">obj</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{}</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 3.1 正则表达式 基本形式 /正则表达式主体/修饰符(可选)</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// i 大小不那啥  g 全局匹配 不会在匹配一个后就停止</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// JavaScript 中，正则表达式通常用于两个字符串方法 : </span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// search()-并返回子串的起始位置 和 replace()-替换 和 exec也常用</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">reg</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/([^</span><span style="color:#C3E88D;">?&amp;=</span><span style="color:#89DDFF;">]+)</span><span style="color:#C3E88D;">=</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">g</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 先行断言 后行：后面的内容应匹配表达式 exp</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">reg1</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/(?=</span><span style="color:#C3E88D;">三</span><span style="color:#89DDFF;">)</span><span style="color:#C3E88D;">.</span><span style="color:#89DDFF;">*(?=</span><span style="color:#C3E88D;">b</span><span style="color:#89DDFF;">)/</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">123一二三abc</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">match</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">reg1</span><span style="color:#F07178;">))</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 返回三a</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">reg1</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">exec</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">search</span><span style="color:#F07178;">))</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// reg.exec(search,(rs, $1, $2) =&gt; {</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">//         console.log($1, &quot;$1&quot;)</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">//         console.log($2, &quot;$2&quot;)</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">//         console.log(rs, &quot;rs&quot;)</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">//         const name = decodeURIComponent($1)</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">//         let val = decodeURIComponent($2)</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">//         val = String(val)</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">//         obj[name] = val</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">//         return rs</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">//这样子写可以得到第一个参数匹配的内容</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// replace的第一个参数是正则表达式，第二个参数有两种形式，第一种是string，那就是替换了</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 第二种就是传入函数，rs是匹配的内容，$1是第一个括号匹配的内容，$2是第二个括号匹配的内容</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// 如果除了这两个参数外还有的话，那么就是offset（匹配到的索引）,str（原始字符串）</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;font-style:italic;">// reg是正则表达式，传入</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">search</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">replace</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">reg</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">rs</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">$1</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">$2</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">$1</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">$1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">$2</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">$2</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">decodeURIComponent</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">$1</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">val</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">decodeURIComponent</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">$2</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">val</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">String</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">val</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">obj</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">val</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">rs</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">obj</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">		console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">window.location</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getQueryObject</span><span style="color:#A6ACCD;">())</span></span></code></pre></div><h2 id="_1-3-传参的新方法" tabindex="-1">1.3 传参的新方法 <a class="header-anchor" href="#_1-3-传参的新方法" aria-label="Permalink to &quot;1.3 传参的新方法&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">//4.传参function的新方法</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 这里的param是必须传的，之前必须要定义好</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// d e 作为形参传入参数</span></span>
<span class="line"><span style="color:#A6ACCD;">        param</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">param</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> (param</span><span style="color:#89DDFF;">,(</span><span style="color:#A6ACCD;font-style:italic;">d</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">d</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">d</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">e</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">param</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span><span style="color:#F07178;">) </span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">        )</span></span>
<span class="line"><span style="color:#A6ACCD;">注意：这个跟上面的是replace不一样，这里的param</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">d</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">e 全部都是作为参数进行使用的。</span></span>
<span class="line"><span style="color:#A6ACCD;">replace本身就是传入两个参数</span></span></code></pre></div><h2 id="_1-4-bom对象" tabindex="-1">1.4 bom对象 <a class="header-anchor" href="#_1-4-bom对象" aria-label="Permalink to &quot;1.4 bom对象&quot;">​</a></h2><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">en</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">UTF-8</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">X-UA-Compatible</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">IE=edge</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">viewport</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width=device-width, initial-scale=1.0</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Document</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">height: 1900px;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">    &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 2.1 bom对象</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 2.1.1 有趣的窗口</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// window.alert(&quot;这是弹出的窗口&quot;)</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// window.confirm(&quot;这是确认的窗口&quot;) //这里会返回一个boolen值，我们可以根据这个做事情</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// window.prompt(&quot;这是窗口输入框&quot;)  //这里会返回你输入的值，我们可以根据这个做事情</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 2.1.2 window宽高属性</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// console.log(&quot;innerHeight&quot;, window.innerHeight)  //高</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// console.log(&quot;innerWidth&quot;, window.innerWidth)    //宽</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// console.log(&quot;window.location&quot;, window.location)  //路由地址端口号之类的东西</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// console.log(&quot;window.Navigator&quot;, window.navigator) //得到运行平台的相关信息</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 2.1.3 路由操作和</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// window.open(&#39;https://www.jb51.net/article/132323.htm&#39;) //打开某一个网页</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// window.history.back() //返回前一个界面</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// window.history.forward() //去往下一个界面</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//2.1.4 一些窗口之类的操作</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//window.scrollTo(0,500); x，y</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// window.scroll(0,500);第一个和第二个是移动到指定的位置。</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//window.scrollBy(0,500);  这个是向下移动500个px</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// alert(&quot;pageXOffset: &quot; + window.pageXOffset + &quot;, pageYOffset: &quot; + window.pageYOffset);</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// setInterval(()=&gt;{</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//     window.scrollBy(0,50);</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//     console.log(window.pageXOffset,&quot;window.pageXOffset&quot;) //返回滚动</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//     console.log(window.pageYOffset,&quot;window.pageYOffset&quot;)</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// },1000)</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//const w=window.open(&quot;https://blog.csdn.net/weixin_44597002/article/details/126346747&quot;);</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//w.resizeTo(500,500); //当一个窗口里面含有一个以上的 Tab 时，无法设置窗口的大小。</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h2 id="_1-5-迭代器对象" tabindex="-1">1.5 迭代器对象 <a class="header-anchor" href="#_1-5-迭代器对象" aria-label="Permalink to &quot;1.5 迭代器对象&quot;">​</a></h2><h2 id="_1-6-生成器对象" tabindex="-1">1.6 生成器对象 <a class="header-anchor" href="#_1-6-生成器对象" aria-label="Permalink to &quot;1.6 生成器对象&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">生成器。函数前面加一个</span><span style="color:#89DDFF;">*</span></span>
<span class="line"><span style="color:#A6ACCD;">类似于 </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">*</span><span style="color:#82AAFF;">a</span><span style="color:#A6ACCD;">（）</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">xxx</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">a</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">next</span><span style="color:#A6ACCD;">()  会输出 </span><span style="color:#89DDFF;">{</span><span style="color:#FFCB6B;">value</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">xxx</span><span style="color:#F07178;">，</span><span style="color:#FFCB6B;">done</span><span style="color:#89DDFF;">:</span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">生成器中使用yield代替renturn 作为高阶的函数</span></span>
<span class="line"><span style="color:#A6ACCD;">适用于</span></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">*</span><span style="color:#82AAFF;">a</span><span style="color:#A6ACCD;">（）</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">xxx</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">ccc</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">这样子返回不了ccc</span></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">*</span><span style="color:#82AAFF;">a</span><span style="color:#A6ACCD;">（）</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">yield</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">xxx</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">yield</span><span style="color:#F07178;">   </span><span style="color:#A6ACCD;">ccc</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">当执行到yield的时候，会返回值并且上下文会被保留。在第二次next的时候就能返回ccc。async await也是用这个实现的</span></span>
<span class="line"><span style="color:#A6ACCD;">调用起来当做数组一样  for （</span><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> param </span><span style="color:#89DDFF;">of</span><span style="color:#A6ACCD;"> a ）</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">param</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="_1-11-generator-生成器对象" tabindex="-1">1.11 Generator（生成器对象） <a class="header-anchor" href="#_1-11-generator-生成器对象" aria-label="Permalink to &quot;1.11 Generator（生成器对象）&quot;">​</a></h2><p>是一种异步的解决方案。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">generator是一种特殊的iterator，generator可以替代iterator实现，使代码更为简洁</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">迭代器对象需要符合迭代器协议是调用对象的next方法：必须有 next() 方法。每调用next方法返回一个包含value 和 done 属性的对象。指针一直向后面移动</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">可迭代对象需要实现迭代器协议：Interable</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">生成器是</span></span>
<span class="line"><span style="color:#A6ACCD;">一是，function关键字与函数名之间有一个星号；</span></span>
<span class="line"><span style="color:#A6ACCD;">二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）yield只能在Generator函数里面使用</span></span></code></pre></div><h2 id="_1-12-bigint类型是一种内置对象" tabindex="-1">1.12 BigInt类型是一种内置对象 <a class="header-anchor" href="#_1-12-bigint类型是一种内置对象" aria-label="Permalink to &quot;1.12 BigInt类型是一种内置对象&quot;">​</a></h2><p>可以表示大于2^53-1的整数，这是number能表示的最大数字s</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> BigNumber </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2838489273498793847982374</span><span style="color:#C792EA;">n</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> BigNumber2 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">BigInt</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">298374982374938</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> BigNumber3 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">BigInt</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">2398749829823474982</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> BigNumber4 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">BigInt</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">0x1ffffffffffffffffffffffffff</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span></code></pre></div><h2 id="_1-13-map" tabindex="-1">1.13 Map <a class="header-anchor" href="#_1-13-map" aria-label="Permalink to &quot;1.13 Map&quot;">​</a></h2><ul><li>定义:let m = new Map()</li><li>设置:m.set(&#39;foo&#39;, 2)</li><li>是否有某个属性:m.has(&#39;foo&#39;)</li><li>读取属性:console.log(m.get(&#39;foo&#39;))</li><li>删除属性：m.delete(&#39;foo&#39;)</li><li>清除map:m.clear()</li><li>获取数量：(m.size) // 0</li><li>map 用 json.stringify 会报错，不想报错只能够定义json.stringify的第二个参数，也就是function(key,value),这样的话，key是没有参数的，只有value有参数，这个时候最好组装成 object 结构的东西</li><li>对了 map经过 array.from 的 第一个参数是最先加进去的参数</li></ul><h2 id="_1-14-set" tabindex="-1">1.14 Set <a class="header-anchor" href="#_1-14-set" aria-label="Permalink to &quot;1.14 Set&quot;">​</a></h2><ul><li>创造: new Set()</li><li>添加:add(1)</li><li>删除:.delete(1)</li><li>是否存在某一个元素:has(1)</li><li>全部删除：clear()</li></ul><h2 id="_1-15-weakset" tabindex="-1">1.15 weakset <a class="header-anchor" href="#_1-15-weakset" aria-label="Permalink to &quot;1.15 weakset&quot;">​</a></h2><ul><li><p><code>WeakSet</code> <strong>只能是对象</strong>的集合，而不能像 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set" target="_blank" rel="noreferrer"><code>Set</code></a> 那样，可以是任何类型的任意值</p></li><li><p>但是不同内存地址的对象也麻烦.并且不能够直接访问集合中的元素。并没有 iterable属性</p></li><li><p>适合用在不需要判断 他能不存在的数组。（注意需要控制他就不行，因为拿不到具体的值）。但是又有问题，就是对象的引用地址的会变的</p></li></ul><h2 id="_1-16-weakref" tabindex="-1">1.16 WeakRef <a class="header-anchor" href="#_1-16-weakref" aria-label="Permalink to &quot;1.16 WeakRef&quot;">​</a></h2><p>这玩意能不用就不用？</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> test  </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">WeakRef</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">id</span><span style="color:#89DDFF;">:</span><span style="color:#F78C6C;">2</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> test1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> test</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">deref</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">test:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">test)</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">test1:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">test1)</span></span></code></pre></div><p>因为他可能永久不会被回收，并且在不同js渲染器上面表现的形式也有所不同</p><h2 id="_1-20-数据转化" tabindex="-1">1.20 数据转化 <a class="header-anchor" href="#_1-20-数据转化" aria-label="Permalink to &quot;1.20 数据转化&quot;">​</a></h2><ul><li><p>map 和 json的互转</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> myMap </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Map</span><span style="color:#A6ACCD;">([</span></span>
<span class="line"><span style="color:#A6ACCD;">  [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">key1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">value1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">key2</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">value2</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">])</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> mapToObject </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">fromEntries</span><span style="color:#A6ACCD;">(myMap)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 转换为对象</span></span></code></pre></div></li><li><p>set 转 array</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> test </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Set</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"><span style="color:#A6ACCD;">test</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">23</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(Array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">from</span><span style="color:#A6ACCD;">(test))</span></span></code></pre></div></li></ul></div></div></main><footer class="VPDocFooter" data-v-c4b0d3cf data-v-face870a><!--[--><!--]--><div class="edit-info" data-v-face870a><!----><div class="last-updated" data-v-face870a><p class="VPLastUpdated" data-v-face870a data-v-7b3ebfe1>Last updated: <time datetime="2023-10-18T00:57:34.000Z" data-v-7b3ebfe1></time></p></div></div><div class="prev-next" data-v-face870a><div class="pager" data-v-face870a><a class="pager-link prev" href="/front-base-know-blog/know/know/4javascript%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA%E9%A2%98" data-v-face870a><span class="desc" data-v-face870a>Previous page</span><span class="title" data-v-face870a>js基础(3) | 代码输出</span></a></div><div class="has-prev pager" data-v-face870a><a class="pager-link next" href="/front-base-know-blog/know/know/9javascript%E5%9F%BA%E7%A1%80" data-v-face870a><span class="desc" data-v-face870a>Next page</span><span class="title" data-v-face870a>js基础(5)</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-f0b011de data-v-2f86ebd2><div class="container" data-v-2f86ebd2><p class="message" data-v-2f86ebd2>MIT License.</p><p class="copyright" data-v-2f86ebd2>Copyright © 2023～present Electrolux</p></div></footer><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"95f8ca9d\",\"java_base.md\":\"edc53698\",\"guide_quick start.md\":\"51bdad5b\",\"java_java.md\":\"07f7958b\",\"know_know_11.web3.md\":\"930011fd\",\"supper_工具基础_16.代码高亮.md\":\"775a71ba\",\"supper_工具基础_6codepen.md\":\"46f8bbbd\",\"supper_工具基础_5ps切图.md\":\"dc662c1f\",\"supper_前端库_1vueify.md\":\"04b61666\",\"supper_工程化_7性能优化和调试.md\":\"981a8dd6\",\"know_know_8adb.md\":\"ccc6c2e0\",\"supper_工具基础_1sourcetree的使用.md\":\"d71319d4\",\"know_know_10.项目具体代码优化.md\":\"f55add09\",\"supper_工程化_4docker 部署实操.md\":\"2e571e48\",\"know_know_1html.md\":\"19aaf16a\",\"supper_工具基础_8graphql.md\":\"198ddc72\",\"supper_工程化_6gitee流水线.md\":\"93a4c7ff\",\"know_know_5javascript-es6.md\":\"4c2cf8f7\",\"know_框架_16.echart.md\":\"0ada5f86\",\"know_know_3javascript基础.md\":\"900d378b\",\"know_优化_3算法.md\":\"8f5141e6\",\"know_框架_14webgl基础.md\":\"00a11e3e\",\"python_flask.md\":\"c8a0482c\",\"supper_功能_9监控停留时间.md\":\"2df00eaf\",\"know_框架_7python.md\":\"7d7eed5d\",\"supper_工程化_1工程化基础.md\":\"d48b3bbc\",\"know_优化_9wasm.md\":\"8d5d5bf6\",\"supper_工具基础_3github图床.md\":\"7073aa94\",\"supper_功能_8前端上传下载.md\":\"99e30d2a\",\"know_框架_13electron.md\":\"d3e93be3\",\"supper_前端库_3js-cookie.md\":\"91624dd6\",\"supper_工具基础_9快速mock.md\":\"215a0e2b\",\"know_know_4javascript代码输出题.md\":\"7348a30a\",\"python_base.md\":\"7acd6bad\",\"supper_功能_5微信支付.md\":\"d09d8b08\",\"know_框架_12threejs.md\":\"b6fbcf93\",\"know_框架_7tensorflow.md\":\"2ccc8062\",\"supper_工具基础_7icon实操.md\":\"f1512b60\",\"supper_工具基础_2用gitee连接ssh_linux服务器.md\":\"1bc61e8d\",\"supper_3d数字孪生_3ar的使用.md\":\"5db75881\",\"python_flask_开始.md\":\"54460465\",\"know_know_12.运维.md\":\"b8bd4e62\",\"supper_工具基础_14.vscode.md\":\"f106db65\",\"know_优化_12.pwa.md\":\"8327b1db\",\"know_know_6ts.md\":\"49f90aab\",\"supper_supper_4ui设计.md\":\"53988b67\",\"supper_功能_10数据大屏自适应.md\":\"7c40b558\",\"supper_工程化_3关于一些自动化脚本.md\":\"38029566\",\"know_know_4javascript手写题.md\":\"50a7a32f\",\"supper_工具基础_13mac的使用.md\":\"56de5b9c\",\"know_know_2javascript基础.md\":\"3d42c0ee\",\"supper_功能_7深度学习实操.md\":\"f6b94234\",\"know_优化_5npm_组件库构造.md\":\"67d2b67c\",\"know_计算机基础_1计算机网络.md\":\"5d905f95\",\"supper_3d数字孪生_2three世泊大屏实操.md\":\"beb9c2f8\",\"supper_功能_11拖拽元素.md\":\"cf7bf8a0\",\"python_llm.md\":\"e97febae\",\"know_know_7css.md\":\"06a3d117\",\"supper_supper_2实用算法.md\":\"e4baf1d9\",\"supper_工具基础_4git的基本使用.md\":\"c5629b74\",\"supper_功能_12vue-element-admin.md\":\"20c09558\",\"supper_工程化_5给包打补丁.md\":\"5103e073\",\"know_框架_11逆向数据crawl.md\":\"ae5ee06c\",\"supper_功能_4ffmpeg-rmtp监控.md\":\"39152e9b\",\"project_图表绘制.md\":\"dd437537\",\"supper_工具基础_12nvm.md\":\"329d446d\",\"know_框架_8mediapipe.md\":\"23fc89f2\",\"know_优化_6webrtc.md\":\"21589281\",\"know_优化_1性能优化和安全.md\":\"270924f0\",\"supper_功能_1小功能汇总.md\":\"5663f27a\",\"know_框架_4微前端.md\":\"76663f96\",\"supper_supper_1代码优化.md\":\"6126a362\",\"know_框架_10aframe.md\":\"7daf1aa1\",\"supper_supper_3性能优化.md\":\"86672f22\",\"know_优化_11.webcomponent.md\":\"94e3cf8a\",\"supper_功能_2小功能汇总.md\":\"692f88ef\",\"know_框架_1vue.md\":\"a9100a41\",\"supper_个人封装_1个人发包模板.md\":\"6b48d3d3\",\"supper_工具基础_10脚手架.md\":\"534226fa\",\"supper_工具基础_11figma.md\":\"ffebb5c1\",\"know_框架_15threejs.md\":\"85dc8e0c\",\"supper_功能_3小功能汇总.md\":\"9765dc9a\",\"supper_功能_6v-model组件封装.md\":\"9df7d5cf\",\"supper_3d数字孪生_5threejs的性能优化.md\":\"eafc4b19\",\"know_框架_8ffmpeg.md\":\"56543d8b\",\"supper_3d数字孪生_1webgl基础.md\":\"9602a381\",\"know_框架_4three数据大屏.md\":\"9b71f7c5\",\"know_框架_3ssr.md\":\"f78ee50f\",\"supper_前端库_2anime.js.md\":\"62c0fbd1\",\"know_框架_2react.md\":\"3ef491f2\",\"know_框架_5vue3.md\":\"a9430a8a\",\"know_框架_17webpack.md\":\"d7f6f200\"}")
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Electrolux_blog\",\"description\":\"hello world\",\"base\":\"/front-base-know-blog/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"outlineTitle\":\"目录\",\"i18nRouting\":true,\"logo\":\"https://cdn.jsdelivr.net/npm/electroluxasset@1.0.8/image/svg/book.svg\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"前端基础\",\"link\":\"/know/know/1html\"},{\"text\":\"前端工程化\",\"link\":\"/supper/supper/1代码优化\"},{\"text\":\"Python\",\"link\":\"/python/flask.md\"},{\"text\":\"Java\",\"link\":\"/java/java.md\"},{\"text\":\"项目\",\"link\":\"/project/javadump分析.md\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://gitee.com/Electrolux\"}],\"footer\":{\"message\":\"MIT License.\",\"copyright\":\"Copyright © 2023～present Electrolux\"},\"sidebar\":{\"/know/\":[{\"text\":\"前端基础\",\"collapsed\":false,\"items\":[{\"text\":\"html(浏览器)\",\"link\":\"/know/know/1html\"},{\"text\":\"js基础(1)\",\"link\":\"/know/know/2javascript基础\"},{\"text\":\"js基础(2)\",\"link\":\"/know/know/3javascript基础\"},{\"text\":\"js基础(3) | 手写题\",\"link\":\"/know/know/4javascript手写题\"},{\"text\":\"js基础(3) | 代码输出\",\"link\":\"/know/know/4javascript代码输出题\"},{\"text\":\"js基础(4) | es6\",\"link\":\"/know/know/5javascript-es6\"},{\"text\":\"js基础(5)\",\"link\":\"/know/know/9javascript基础\"},{\"text\":\"TypeScript\",\"link\":\"/know/know/6ts\"},{\"text\":\"CSS\",\"link\":\"/know/know/7css\"},{\"text\":\"BUG\",\"link\":\"/know/know/8bug\"}]},{\"text\":\"计算机基础\",\"collapsed\":false,\"items\":[{\"text\":\"计算机网络\",\"link\":\"/know/计算机基础/1计算机网络\"}]},{\"text\":\"框架 | 工具\",\"collapsed\":false,\"items\":[{\"text\":\"vue\",\"link\":\"/know/框架/1vue\"},{\"text\":\"react\",\"link\":\"/know/框架/2react\"},{\"text\":\"ssr\",\"link\":\"/know/框架/3ssr\"},{\"text\":\"微前端\",\"link\":\"/know/框架/4微前端\"},{\"text\":\"vue3\",\"link\":\"/know/框架/5vue3\"},{\"text\":\"nginx\",\"link\":\"/know/框架/6nginx\"},{\"text\":\"python\",\"link\":\"/know/框架/7python\"},{\"text\":\"ffmpeg\",\"link\":\"/know/框架/8ffmpeg\"},{\"text\":\"tensorFlow\",\"link\":\"/know/优化/7tensorFlow\"},{\"text\":\"mediapipe\",\"link\":\"/know/优化/8mediapipe\"},{\"text\":\"aframe\",\"link\":\"/know/框架/10aframe\"},{\"text\":\"逆向数据crawl\",\"link\":\"/know/框架/11逆向数据crawl\"},{\"text\":\"threejs\",\"link\":\"/know/框架/12threejs\"},{\"text\":\"13electron\",\"link\":\"/know/框架/13electron\"},{\"text\":\"13electron\",\"link\":\"/know/框架/17webpack\"}]},{\"text\":\"优化 | 工程\",\"collapsed\":false,\"items\":[{\"text\":\"性能优化和安全\",\"link\":\"/know/优化/1性能优化和安全\"},{\"text\":\"算法\",\"link\":\"/know/优化/3算法\"},{\"text\":\"性能优化\",\"link\":\"/know/优化/4性能优化\"},{\"text\":\"组件库构造\",\"link\":\"/know/优化/5npm,组件库构造\"},{\"text\":\"webrtc\",\"link\":\"/know/优化/6webrtc\"},{\"text\":\"wasm\",\"link\":\"/know/优化/9.wasm\"},{\"text\":\"webcomponent\",\"link\":\"/know/优化/11.webcomponent\"},{\"text\":\"pwa\",\"link\":\"/know/优化/12.pwa\"}]}],\"/java/\":[{\"text\":\"java\",\"collapsed\":false,\"items\":[{\"text\":\"jvm\",\"link\":\"/java/java\"},{\"text\":\"springboot\",\"link\":\"/java/base\"}]}],\"/python/\":[{\"text\":\"python 基础\",\"collapsed\":false,\"items\":[{\"text\":\"服务器\",\"link\":\"/python/flask\"}]}],\"/project/\":[{\"text\":\"项目文档\",\"collapsed\":false,\"items\":[{\"text\":\"java dump\",\"link\":\"/project/图表绘制\"}]}],\"/supper/\":[{\"text\":\"代码高级\",\"collapsed\":false,\"items\":[{\"text\":\"代码优化 | 设计模式\",\"link\":\"/supper/supper/1代码优化\"},{\"text\":\"设计模式与js\",\"link\":\"/supper/supper/2实用算法\"},{\"text\":\"性能优化\",\"link\":\"/supper/supper/3性能优化\"},{\"text\":\"UI设计\",\"link\":\"/supper/supper/4UI设计\"}]},{\"text\":\"工程化\",\"collapsed\":false,\"items\":[{\"text\":\"工程化基础\",\"link\":\"/supper/工程化/1工程化基础\"},{\"text\":\"webpack的配置\",\"link\":\"/supper/工程化/2webpack的配置\"},{\"text\":\"自动化脚本\",\"link\":\"/supper/工程化/3关于一些自动化脚本\"},{\"text\":\"docker 部署实操\",\"link\":\"/supper/工程化/4docker 部署实操\"},{\"text\":\"patch-package\",\"link\":\"/supper/工程化/5给包打补丁\"},{\"text\":\"gitee流水线\",\"link\":\"/supper/工程化/6gitee流水线\"}]},{\"text\":\"工具基础\",\"collapsed\":false,\"items\":[{\"text\":\"Sourcetree的使用\",\"link\":\"/supper/工具基础/1Sourcetree的使用\"},{\"text\":\"用gitee连接ssh,linux服务器\",\"link\":\"/supper/工具基础/2用gitee连接ssh,linux服务器\"},{\"text\":\"github图床\",\"link\":\"/supper/工具基础/3github图床\"},{\"text\":\"git的基本使用\",\"link\":\"/supper/工具基础/4git的基本使用\"},{\"text\":\"ps切图\",\"link\":\"/supper/工具基础/5ps切图\"},{\"text\":\"codepen\",\"link\":\"/supper/工具基础/6codepen\"},{\"text\":\"icon实操 | svg原理\",\"link\":\"/supper/工具基础/7Icon实操\"},{\"text\":\"GraphQl\",\"link\":\"/supper/工具基础/8GraphQl\"},{\"text\":\"快速mock\",\"link\":\"/supper/工具基础/9快速mock\"},{\"text\":\"脚手架\",\"link\":\"/supper/工具基础/10脚手架\"},{\"text\":\"figma\",\"link\":\"/supper/工具基础/11figma\"},{\"text\":\"nvm\",\"link\":\"/supper/工具基础/12nvm\"},{\"text\":\"苹果\",\"link\":\"/supper/工具基础/13mac的使用\"}]},{\"text\":\"个人封装\",\"collapsed\":false,\"items\":[{\"text\":\"个人封装\",\"link\":\"/supper/个人封装/1个人发包模板\"}]},{\"text\":\"前端库\",\"collapsed\":false,\"items\":[{\"text\":\"vueify\",\"link\":\"/supper/前端库/1vueify\"},{\"text\":\"anime.js\",\"link\":\"/supper/前端库/2anime.js\"},{\"text\":\"js-cookie\",\"link\":\"/supper/前端库/3js-cookie\"}]},{\"text\":\"功能\",\"collapsed\":false,\"items\":[{\"text\":\"小功能汇总1\",\"link\":\"/supper/功能/1小功能汇总\"},{\"text\":\"小功能汇总2\",\"link\":\"/supper/功能/2小功能汇总\"},{\"text\":\"小功能汇总3\",\"link\":\"/supper/功能/3小功能汇总\"},{\"text\":\"ffmpeg-rmtp监控\",\"link\":\"/supper/功能/4ffmpeg-rmtp监控\"},{\"text\":\"微信支付\",\"link\":\"/supper/功能/5微信支付\"},{\"text\":\"v-model组件封装\",\"link\":\"/supper/功能/6v-model组件封装\"},{\"text\":\"深度学习实操\",\"link\":\"/supper/功能/7深度学习实操\"},{\"text\":\"前端上传下载\",\"link\":\"/supper/功能/8前端上传下载\"},{\"text\":\"监控停留时间\",\"link\":\"/supper/功能/9监控停留时间\"},{\"text\":\"数据大屏自适应\",\"link\":\"/supper/功能/10数据大屏自适应\"},{\"text\":\"拖拽元素\",\"link\":\"/supper/功能/11拖拽元素\"},{\"text\":\"vue-element-admin\",\"link\":\"/supper/功能/12vue-element-admin\"}]}]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}")</script>
    
  </body>
</html>